<script lang="tsx">
import { ElRadioGroup, ElRadioButton } from 'element-plus'
import { computed, defineComponent, type PropType, unref } from 'vue'
import { get, omit } from 'lodash-es'
import type { OptionsItem } from '../types/formItem'
import type { Recordable } from '../types/form'
import { useRuleFormItem } from '../common/useFormItem'
import { propTypes } from '@/types/propTypes'

export default defineComponent({
  name: 'RadioButtonGroup',
  props: {
    //当前数参数
    options: {
      type: Array as PropType<OptionsItem[]>,
      default: () => [],
    },
    modelValue: {
      type: [String, Number, Boolean],
      default: '',
    },
    labelField: propTypes.string.def('label'),
    valueField: propTypes.string.def('value'),
  },
  emit: ['update:modelValue'],
  setup(props, { attrs }) {
    const [state] = useRuleFormItem(props, 'modelValue', 'update:modelValue')

    const getOptions = computed(() => {
      const { labelField, valueField, options } = props
      const optionArr = unref(options).reduce((prev, next: Recordable) => {
        if (next) {
          prev.push({
            ...omit(next, [labelField, valueField]),
            label: get(next, labelField),
            value: get(next, valueField),
          })
        }
        return prev
      }, [] as OptionsItem[])
      // console.log("optionArr", optionArr)

      return optionArr
    })

    // function handleChange(args: any) {
    //   emitData.value = args;
    //   emit("update:modelValue", emitData.value);
    // }
    function Radio() {
      // console.log('attrs', attrs);

      return getOptions.value.map((e: any, index: number) => {
        return (
          <ElRadioButton
            {...attrs}
            value={e.value}
            key={index + e.value}
            disabled={e.disabled || false}
          >
            {e.label}
          </ElRadioButton>
        )
      })
    }
    return () => {
      return (
        <ElRadioGroup {...attrs} modelValue={state.value}>
          {Radio()}
        </ElRadioGroup>
      )
    }
  },
})
</script>
